l<template>
  <div class="maphotMavpWrap">
    <div class="containerWrap" ref="mapScreenfull">
      <div class="infoButton">
        <i @click='screenfullMap' :class="iconFull"></i>
      </div>
      <div class="colorWrap">
        <div v-for="(item,index) in companyColor" :key="index" style="color: #3975FE;">
          <span class="colorlist" :style="'background-color:'+item.color"></span>{{item.value}}<br/>
        </div>
      </div>
      <div id="time"></div>
      <div class="mapMove" >
        <div class="moveWrap">
        <el-tooltip :visible-arrow="false"  class="item" effect="dark" content="播放" placement="top-start">
          <i @click='mapAction(0)' v-show="!isrun" class="iconfont icon-bofang2"></i>
        </el-tooltip>
        <el-tooltip :visible-arrow="false"  class="item" effect="dark" content="暂停" placement="top-start">
          <i @click='mapAction(1)' v-show="isrun" class="iconfont icon-zanting"></i>
        </el-tooltip>
      </div>
        <div class="moveWrap" >
          <el-tooltip :visible-arrow="false" class="item" effect="dark" content="上一个时间" placement="top-start">
            <i @click='mapAction(2)' class="iconfont icon-shangyishou "></i>
          </el-tooltip>
          <el-tooltip :visible-arrow="false" class="item" effect="dark" content="下一个时间" placement="top-start">
            <i @click='mapAction(3)' class="iconfont icon-xiayishou"></i>
          </el-tooltip>
          <el-tooltip :visible-arrow="false" class="item" effect="dark" content="最新热力图" placement="top-start">
            <i @click='mapAction(4)' class="iconfont icon-yitingzhi"></i>
          </el-tooltip>

        </div>
        <div class="sliderBar" @click="noniceInfo" >
          <el-slider
            v-model="value7"
            :step="2"
            :min="0"
            :format-tooltip="getFormat"
            :max="timeLength"
          >
            <!--show-stops-->
          </el-slider>
        </div>
        <div id="time2" style="display:inline-block;"></div>
      </div>
      <div id="container"></div>
    </div>
  </div>
</template>

<script>



  import bikeData from '../../../store/data'
  export default {
    data () {
      return {
        radio3: '',
        scrollMap: "",
        enterpriseId: "",
        iconFull: "iconfont icon-quanping",
        value7: 0,
        mapData: [[],[],[]],
        mapvData:[],
        BatchNoArr:[],
        isrun:false,
        getTrue: false,
        roomMap: 11,
        timeLength: 10,
        arrLength: "",
        timeFormater:15,
        mapvLayer: "",
        currentTime:0,
        yesDaytime:"",
        timer:"",
        map: {},
        splitMapList: {other: 'pink', 14: "pink", 16: "pink"},
        companyColor: [{color:"red",value:">1000"},{color:"yellow",value:"500-1000"},{color:"green",value:"100-500"},{color:"blue",value:"<100"}],
        MapPage: "",
        movePerHour:[],

      }
    },
    mounted(){
      document.querySelector(".maphotMavpWrap").style.height = document.querySelector(".moveControlWrap").clientHeight - 88 + "px"
      document.querySelector(".sliderBar").style.width = document.querySelector(".mapMove").clientWidth - 250 + "px"
      this.getHotMap()
     /* window.onresize = () => {
        if(document.querySelector(".maphotMavpWrap")){
          document.querySelector(".maphotMavpWrap").style.height = document.querySelector(".moveControlWrap").clientHeight - 120 + "px"
        }

      }*/
    },
    beforeDestroy(){
      window.onresize =null
    },
    created(){
      //      获取首次数据
      this.getBatchNo()
      //10分钟刷新一次
      this.getMapHotInfoCounts()
    },
    components: {
    },
    destroyed(){
      clearInterval(this.timer)
    },
    methods: {
      openDialog(orderNo){
        this.axios.post("", {...this.searchInfo,orderNo:orderNo})
          .then(response => {
            const result = response.data
            if(result.code==200){
              this.$refs.detailBtn.dialigOpen(result.result)
            }
          })
      },

      //格式化数据
      getFormat(val){

        this.currentTime=val
        let date,date2;
        if(this.yesDaytime){

          let _this=this
          let str=this.yesDaytime
          let time
          time=str.substring(0,4)+"/"+str.substring(4,6)+"/"+str.substring(6,8)+" "+str.substring(8,10)+":"+str.substring(10,12)

          let starttimeHaoMiao = new Date(time).getTime(); //得到毫秒数
          date = this.dtime(starttimeHaoMiao+this.currentTime*_this.timeFormater*1000*60).format('HH:mm')

            date2 = this.dtime(starttimeHaoMiao+parseInt(this.currentTime/2)*2*_this.timeFormater*1000*60).format('YYYY-MM-DD HH:mm')

        }else {
          date = this.dtime(new Date().getTime()).format('HH:mm')
          date2 = this.dtime(new Date().getTime()).format('YYYY-MM-DD HH:mm')
        }
        this.$nextTick(()=>{
          document.querySelector('#time').innerHTML=date2;
          document.querySelector('#time2').innerHTML=date;
        })

        return date
      },
//      播放中点击
      noniceInfo(){
        this.isrun=false
        this.currentTime=this.value7
        if(this.mapvLayer){
          this.mapvLayer.destroy()
        }
        this.mapvSet(1)

      },
//      播放控件
      mapAction(key){
        if(key==0){ //播放
          if(this.mapvData.length==0){
            this.mapData.forEach(item=>{
              this.mapvData=this.mapvData.concat(item)
            })
          }
          console.log(this.mapvData)
            this.isrun=true
            if(this.mapvLayer){
              this.mapvLayer.destroy()
            }

            this.mapvSet(key)

        }else if(key==1){//暂停
          this.isrun=false
          if(this.mapvLayer){
            this.mapvLayer.destroy()
          }
          this.mapvSet(key)

        }else if(key==2){//上一个
          this.isrun=false
          if(this.currentTime>0){
            this.currentTime-=2
          }

          if(this.mapvLayer){
            this.mapvLayer.destroy()
          }
          this.mapvSet(1)

        }else if(key==3){//下一个
          this.isrun=false
          if(this.currentTime<this.timeLength){
            this.currentTime+=2
          }

          if(this.mapvLayer){
            this.mapvLayer.destroy()
          }
          this.mapvSet(1)

        }else if(key==4){//最新状态

          this.isrun=false
            this.currentTime=this.timeLength

          if(this.mapvLayer){
            this.mapvLayer.destroy()
          }
          this.mapvSet(1)
        }
      },

      //全屏
      screenfullMap(){

        if (this.iconFull == "iconfont icon-quanping") {
          this.iconFull = "iconfont icon-quxiaoquanping"
          this.isFull=true
        } else if (this.iconFull == "iconfont icon-quxiaoquanping") {
          this.iconFull = "iconfont icon-quanping"
          this.isFull=false
        }
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);
        }
        setTimeout(()=>{
          document.querySelector(".sliderBar").style.width = document.querySelector(".mapMove").clientWidth - 250 + "px"
        },100)
      },
      //    获取实时数据
      getMapHotInfoCounts(){
        clearInterval(this.timer)
        this.timer=setInterval(()=>{this.getBatchNo()},600000)
      },
      //获取批次
      getBatchNo(){
        this.movePerHour=[]
        //时间轴
        for (let i = 0; i <48; i++) {
          const date = this.dtime(parseInt(new Date().getTime()/1800000)*1800000 - 1800000 * i).format('YYYYMMDDHHmm00')
          this.movePerHour.unshift(date)
        }

        this.BatchNoArr=this.movePerHour
        this.timeLength=(this.movePerHour.length-1)*2
        this.arrLength=this.movePerHour.length
        this.MapPage=0

        this.getMapInfo()

      /*  let url = process.env.API_HOST + 'ulinkRack/findBatchNoOneday'
        this.axios.get(url, {withCredentials: true})
          .then(response => {
            const result = response.data
            if (result.state === 0) {
            this.BatchNoArr=result.data
            this.timeLength=(result.data.length-1)*2
            this.arrLength=result.data.length
              this.MapPage=0
            }else {
              this.getHotMap()
            }
          })*/
      },
      //     获取数据
      getMapInfo(){

        this.movePerHour.forEach((item1,index)=>{
          if(this.MapPage==0){
            this.yesDaytime=this.BatchNoArr[0]
          }
          this.mapData[index]=[]
          bikeData.areaHotData.forEach((item) => {
            this.mapData[index].unshift({
              "geometry": {"type": "Point",
                "coordinates": [item.lng, item.lat]},
//              count: Math.round((Math.random() * (20 - 10) + 10) * 100) / 100,
              "count": item.vehicleCount
            })
//            this.mapvData.unshift({...item, time: index*2000,count: Math.round((Math.random() * (20 - 10) + 10) * 100) / 100,})
          })
          console.log(bikeData.areaHotData.length)
          this.MapPage++
        })
          console.log(this.mapData)
          if(!this.isrun){
          setTimeout(()=>{
            this.currentTime=this.timeLength
            this.mapvSet(1)
          })

          }else {
            this.getHotMap()
            this.mapvSet(0)
          }


       /* let Mapurl = process.env.API_HOST + '/ulinkRack/findByBatchNo?batchNo=' +this.BatchNoArr[this.MapPage]
        this.axios.get(Mapurl, {withCredentials: true})
          .then(response => {
            const result = response.data
            if (result.state === 0) {
              if(this.MapPage==0){
                this.mapvData=[]
                this.yesDaytime=this.BatchNoArr[0]
              }
              this.mapData[this.MapPage]=[]
              result.data.forEach((item) => {
                this.mapData[this.MapPage].unshift({
                  geometry: {
                    type: 'Point',
                    coordinates: [item.lng, item.lat]
                  },
                  count: item.degree,
                  time: this.MapPage*2
                })

                this.mapvData.unshift({
                  geometry: {
                    type: 'Point',
                    coordinates: [item.lng, item.lat]
                  },
                  count: item.degree,
                  time: this.MapPage*2000
                })
              })
              this.MapPage++
            }
          })*/
      },

      getHotMap(){
        this.map = new BMap.Map("container", {
          enableMapClick: false,
          minZoom: 10,
          maxZoom: 19
        });    // 创建Map实例

        this.map.centerAndZoom(new BMap.Point(114.03533, 22.615409), this.roomMap);  // 初始化地图,设置中心点坐标和地图级别
        this.map.addControl(new BMap.OverviewMapControl());
        this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        this.map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
        this.map.enableScrollWheelZoom(); // 允许滚轮缩放

       /* this.map.setMapStyle({
          style: 'midnight'
        });*/

        this.map.setMapStyle({
          styleJson: [
            {
              "featureType": "poilabel",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "manmade",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "building",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            }
          ]
        });


      },
      mapvSet(index){
        let _this=this
        if(this.mapvLayer){
          this.mapvLayer.destroy()
        }
        if(index==0){

          let dataSet = new mapv.DataSet(this.mapvData);
          let options = {
            updateCallback: function (time) {
              if(_this.isrun){
                time = (time/1000).toFixed(2);
                _this.value7=time-0

              }
            },
            size: 10,
            gradient: { 0.35: "rgb(199,199,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
            max: 100,
            animation: {
              type: 'time',
              stepsRange: {
                start: 0,
                end: this.timeLength*1000   //时间范围
              },
              trails: 2000,
              duration: this.timeLength,
            },
            draw: 'heatmap'
          }

          this.mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);

        }else if(index==1){
          this.value7=parseInt(this.currentTime/2)*2
          let dataSet = new mapv.DataSet(this.mapData[parseInt(this.value7/2)]);

          let options = {
            size: 10,
            gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
            max: 100,
            draw: 'heatmap'
          }
          this.mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);
        }

      }
    },
    watch: {
      /*MapPage(){
        if(this.MapPage<this.arrLength){
          this.getMapInfo()
        }
        if(this.MapPage==this.arrLength){
          if(!this.isrun){
            this.currentTime=this.timeLength
            this.mapvSet(1)
          }else {
            this.getHotMap()
            this.mapvSet(0)
          }
        }

      }*/
    }
  }
</script>



<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .maphotMavpWrap
    width: 100%;
    margin 0 auto;
    .containerWrap
      height: 100%;
      width: 100%;
      margin 0px auto;
      position: relative;
      .infoButton
        width 20px
        height 20px
        font-size: 16px;
        color: #3975FE;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index 5
        opacity: 0;
        .iconfont
          color #3975FE
          display: inline-block;
          font-size: 20px;
          cursor pointer
      .colorWrap
        background-color white
        opacity 0.8
        position: absolute;
        line-height 25px
        left 0;
        top: 0;
        padding 10px
        border-radius 5px
        z-index: 5;
        color: black;
        margin-left: 60px;
        margin-top 10px;
        .colorlist
          display: inline-block;
          width: 10px;
          height 10px;
          border-radius: 50%;
          background-color: red;
          margin-right: 3px;
      #time
        position: absolute;
        right: 10px;
        bottom: 45px;
        padding: 10px;
        z-index 100
        color #3975FE
        font-weight bold
        font-size 20px
      .mapMove
        box-sizing border-box
        position absolute
        width 100%
        line-height 20px
        background: rgba(255, 255, 255, 0.7)
        bottom 0
        left 0
        padding-top 5px
        vertical-align bottom !important
        padding-left 20px
        padding-right 20px
        overflow: hidden;
        white-space: nowrap;
        z-index 100
        .moveWrap
          display: inline-block;vertical-align: middle;
        .iconfont
          font-size 25px
          color #3975FE
          cursor pointer
          &:hover
            color darkgreen
        .sliderBar
          display: inline-block;width: 82%;vertical-align: middle;padding-left: 10px;
        #time2
          margin-left 15px
          color: #3975FE;
          width 20px
          height 20px
          font-size 18px
      #container
        height: 100%;
        width: 100%;
    &:hover .infoButton
      opacity: 1;
    .el-slider__bar
      background-color:  #3975FE;

</style>
